<template>
	<view class="fun-flex-col page">
		<view class="un-flex-col">
			<view class="fun-flex-col fun-self-stretch group_3">
				<view class="fun-flex-col fun-self-stretch section">
					<text class="fun-self-start font text_3">Select a Payment Tool</text>
					<view class="fun-mt-10 fun-flex-row fun-items-center fun-justify-between" @click="isPayTool = !isPayTool">
						<text class="font_2 text_4 text_5">Select from your Cryptocurrency Wallet or bank card</text>
						<image class="fun-shrink-0 image_5 right-arrow" v-show='!isPayTool' src="../../../static/6a2d5331e9cc6e46e64fa0debbb45d6f.png" />
						<image class="fun-shrink-0 image_5" v-show='isPayTool' src="../../../static/6a2d5331e9cc6e46e64fa0debbb45d6f.png" />
					</view>
				</view>
				<!-- <image class="fun-shrink-0 fun-self-end image_6"
					src="../../../static/410abffba6066da32f32d443eaf53131.png" /> -->
			</view>
			<view class="fun-flex-row equal-division fun-justify-between" v-show='isPayTool'>
				<view class="fun-flex-col fun-items-center equal-division-item section_3"  @click="payTool = 1" :class="payTool == 1 ? 'active' : ''">
					<image class="image_4" src="../../../static/bbdaf69ae6c7c68a884abbb5557b8167.png" v-show='payTool == 2'/>
					<image class="image_4" src="../../../static/b49bd3685dfaf3cd3f56842dfc967402.png"  v-show='payTool == 1'/>
					<text class="fun-mt-10  font_3 text_4 text_6">Crypto Wallet QR Code</text>
				</view>
				<view class="fun-flex-col fun-items-center equal-division-item section_3" @click="payTool = 2" :class="payTool == 2 ? 'active' : ''">
					<image class="image_4" src="../../../static/bbdaf69ae6c7c68a884abbb5557b8167.png" v-show='payTool == 1'/>
					<image class="image_4" src="../../../static/b49bd3685dfaf3cd3f56842dfc967402.png"  v-show='payTool == 2'/>
					<text class="fun-mt-10 font_3 text_4" >Bank card transfers</text>
				</view>
			</view>
			<view class="fun-self-start font text_7">The type of virtual currency</view>
			<view class="fun-flex-row fun-justify-between group_4">
				<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper" @click="current = 1" :class="current ==1 ? 'active' : ''">
					<text class="font_3 text_8">USDT-TRC20</text>
				</view>
				<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper" @click="current = 2" :class="current ==2 ? 'active' : ''">
					<text class="font_3 text_8">ETH</text>
				</view>
			</view>
			<view class="fun-flex-col fun-self-stretch group_5">
				<view class="fun-flex-col fun-self-stretch section_4">
					<text class="fun-self-start font text_10">Enter top-up amount</text>
					<view class="fun-mt-20 fun-flex-row fun-items-baseline fun-self-stretch group_6">
						<text class="text_11">$</text>
						<input class="fun-ml-10 text_4 text_12" placeholder="Enter the amount in the input box" />
					</view>
					<view class="fun-mt-20 fun-self-stretch divider"></view>
				</view>
				<view class="fun-self-start group_7">
					<text class="font_2">The transaction service fee rate is 0.1% and this transaction will charge a fee of $26.34.</text>
				</view>
				<view class="fun-flex-col fun-justify-start fun-items-center fun-self-stretch text-wrapper_3">
					<text class="text_15" @click="confirm">Confirm</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				isPayTool:false,
				payTool:1,
				current:'1'
			};
		},

		methods: {
			confirm(){
				uni.navigateTo({
					url: `/pages/mine/myWallet/scan`
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.page {
		padding: 32rpx 32rpx;
		background-color: #00033b;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding-left: 40rpx;
			padding-right: 4rpx;

			.text {
				color: #ffffff;
				font-size: 30rpx;
				font-family: SF Pro Text;
				font-weight: 600;
				line-height: 22.18rpx;
			}

			.image {
				width: 34rpx;
				height: 22rpx;
			}

			.image_2 {
				width: 30rpx;
				height: 22rpx;
			}

			.image_3 {
				width: 48rpx;
				height: 22.66rpx;
			}
		}

		.group_2 {
			padding: 12rpx 4rpx 0;

			.pos {
				position: absolute;
				left: 6rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.text_2 {
				color: #ffffff;
				font-size: 32rpx;
				font-family: SF Pro Display;
				font-weight: 300;
				line-height: 28.56rpx;
			}
		}

		.group_3 {
			.section {
				padding: 32rpx;
				background-color: #1b1d53;
				border-radius: 24rpx;

				.text_3 {
					line-height: 25.5rpx;
				}

				.text_5 {
					line-height: 21.58rpx;
				}

				.image_5 {
					width: 32rpx;
					height: 32rpx;
					
				}
				.right-arrow {
					transform: rotate(-90deg);
				}
			}

			.image_6 {
				margin-right: 314rpx;
				margin-top: -8rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.equal-division {
			align-self: stretch;
			margin-top: 32rpx;
			.equal-division-item {
				flex: 0.48;
			}
			.section_3 {
				padding: 20rpx 0;
				background-color: #1b1d53;
				border-radius: 24rpx;
			}
			
			.active {
				border: solid 2rpx #5ceec4;
				text{
					color: #5ceec4;
				}
			}
		}

		.image_4 {
			width: 48rpx;
			height: 48rpx;
		}

		.text_4 {
			opacity: 0.5;
		}

		.font {
			font-size: 28rpx;
			font-family: SF Pro Display;
			font-weight: 700;
			color: #ffffff;
		}

		.text_7 {
			margin-top: 32rpx;
		}

		.group_4 {
			margin-top: 32rpx;
			padding: 0 4rpx;

			.text-wrapper {
				padding: 16rpx 0;
				flex: 0.48;
				background-color: #1b1d53;
				border-radius: 24rpx;
				.text_8 {
					color: #999;
				}
			}
			.active {
				border: solid 2rpx #5ceec4;
				.text_8 {
					color: #5ceec4;
				}
			}
		}

		.font_3 {
			font-size: 24rpx;
			font-family: SF Pro Display;
			color: #ffffff;
		}

		.group_5 {
			margin-right: 12rpx;
			margin-top: 32rpx;

			.section_4 {
				padding: 40rpx 24rpx 32rpx;
				background-color: #1b1d53;
				border-radius: 24rpx;

				.text_10 {
					margin-left: 8rpx;
					line-height: 24.52rpx;
				}

				.group_6 {
					padding: 0 12rpx;

					.text_11 {
						color: #5ceec4;
						font-size: 72rpx;
						font-family: SF Pro Display;
						font-weight: 700;
						line-height: 60.82rpx;
					}

					.text_12 {
						color: #ffffff;
						font-family: SF Pro Display;
						font-weight: 300;
						width: 100%;
					}
				}

				.divider {
					background-color: #b0b1bf24;
					height: 2rpx;
				}
			}

			.group_7 {
				margin: 32rpx 0;
				opacity: 0.5;
				.text_13 {
					font-weight: 600;
				}

				.text_14 {
					font-weight: unset;
					word-break: break-all;
				}
			}

			.text-wrapper_3 {
				margin-top: 12rpx;
				padding: 32rpx 0;
				background-color: #5ceec4;
				border-radius: 44rpx;

				.text_15 {
					color: #000000;
					font-size: 32rpx;
					font-family: SF Pro Display;
					font-weight: 700;
					line-height: 24.08rpx;
				}
			}
		}

		.font_2 {
			font-size: 24rpx;
			font-family: SF Pro Display;
			line-height: 28rpx;
			font-weight: 300;
			color: #ffffff;
		}
	}
</style>